---
title: Scroll Progress
date: 2024-12-19
description: Animated Scroll Progress for your pages
author: dipesh_the_dev
published: true
---

<ComponentPreview name="scroll-progress-demo" />

## Installation

<Tabs defaultValue="cli">
<TabsList>
    <TabsTrigger value="cli">CLI</TabsTrigger>
    <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/scroll-progress
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scroll-progress" />

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { ScrollProgress } from "@/components/ui/scroll-progress"
```

```tsx showLineNumbers
<ScrollProgress />
```

## Props

| Prop        | Type     | Default | Description                                   |
| ----------- | -------- | ------- | --------------------------------------------- |
| `className` | `string` | `-`     | The class name to be applied to the component |

The `ScrollProgress` component also accepts all properties of the `HTMLDivElement` type.

## Credits

- Credit to [dipesh_the_dev](https://twitter.com/dipesh_the_dev)
